<template lang="html">
    <div class="content" v-loading="loading" >
        <h1>该页面用于测试打印功能</h1>
        <div class="table" style="page-break-after:always" v-for="(item2,index) in orderArrays" :key="index">
            <div class="title">
                <div class="title_h">欣美高级定制内衣发货单</div>
                <div class="tr">
                    <div class="td" style="width:150px">收货单位：</div>
                    <div class="td" style="width:254px"></div>
                    <div class="td" style="width:150px">发货日期：</div>
                    <div class="td" style="width:100%; flex:2 1 0%">{{tableData.sendTime}}</div>
                </div>
            </div>
            <div class="t_head">
            <div class="th" style="width:150px">订单号</div>
            <div class="th" style="width:100px">顾客姓名</div>
            <div class="th" style="width:154px">店家名称</div>
            <div class="th" style="width:150px">产品名称</div>
            <div class="th" style="width:60px">尺码</div>
            <div class="th" style="width:80px">颜色</div>
            <div class="th" style="width:77px">数量</div>
            <div class="th" style="width:100px">蕾丝</div>
            <div class="th" style="width:80px">设计师</div>
            <div class="th" style="width:100%;flex:1">备注</div>
            </div>
            <div class="t_body">
                <div class="tr" v-for="item in item2" >
                    <div class="td" style="width:150px">{{item.orderSublistId}}</div>
                    <div class="td" style="width:100px">{{item.userName}}</div>
                    <div class="td" style="width:154px">{{item.branchStoreName}}</div>
                    <div class="td" style="width:150px">{{item.commodityName}}</div>
                    <div class="td" style="width:60px">{{item.size}}</div>
                    <div class="td" style="width:80px">{{item.color}}</div>
                    <div class="td" style="width:77px">{{item.commodityNum}}</div>
                    <div class="td" style="width:100px">{{item.laceName}}</div>
                    <div class="td" style="width:80px">{{item.designerName}}</div>
                    <div class="td" style="width:100%;flex:1"></div>
                </div>

                <div class="tr">
                    <div class="td" style="width:150px"></div>
                    <div class="td" style="width:100%;flex:1;text-align:center">
                    <span style="margin-right:30px">合计： </span>{{orderNums[index]}} 件
                    </div>
                </div>
                <div class="tr">
                    <div class="td" style="width:150px">备注</div>
                    <div class="td" style="width:100%;flex:1"></div>
                </div>
                <div class="tr">
                    <div class="td" style="width:150px">发货人：{{tableData.sendName}}</div>
                    <div class="td" style="flex:1"></div>
                    <div class="td" style="flex:1">会计：</div>
                    <div class="td" style="flex:1"></div>
                    <div class="td" style="flex:1">收货人：</div>
                    <div class="td" style="flex:1"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            tableData: {},
            orderArrays:{},//订单数组
            orderNums:{},//每个订单数组的订单数量,和订单数组一一对应
        }
    },
    mounted() {
        this.tableData = {
            count: "12",
            orders: [
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"4" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"5" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
                { orderSublistId: "1", userName: "你好",commodityNum:"1" },
            ]
        }
        var orders = this.tableData.orders;
        var orderArrays = this.arraySlice(orders,12);
        var orderNums = this.numberCount(orderArrays);
        this.orderArrays = orderArrays;
        this.orderNums = orderNums;
    },
    methods: {
        //计算每页订单有多少数量
        numberCount(array){
            var orderNums = [];
            for(var i in array){
                var sum = 0;
                for(var j in array[i]){
                    sum=this.accAdd(array[i][j].commodityNum,sum)
                }
                orderNums.push(sum);
            }
            return orderNums;
        },
        //切割数组为多个数组
        arraySlice(array, sliceNum) {
            var newArray = [];
            let viod = 0;//数组初始量
            for (let i = 0; i < array.length; i++) {
                if (i % sliceNum == 0 && i != 0) {
                    newArray.push(array.slice(viod, i));
                    viod = i;
                }
                if (i + 1 == array.length) {
                    newArray.push(array.slice(viod, i + 1));
                }
            }
            return newArray;
        },
        accAdd(arg1,arg2){
            var r1,r2,m;
            try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0};
            try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0};
            m=Math.pow(10,Math.max(r1,r2));
            return (arg1*m+arg2*m)/m;
        }
    }
}
</script>

<style lang="css"  scoped>
@page {
    size: auto;
    margin: 0mm;
}

.content {
    background: #fff;
    box-sizing: border-box;
    padding: 0 130px;
    overflow: hidden;
}
.table {
    margin-top: 50px;
    margin-bottom:50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    box-sizing: border-box;
    font-size: 16px;
}
.title {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    line-height: 60px;
}
.title .title_h {
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}
.title .tr {
    font-size: 14px;
}
.t_head {
    display: flex;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
    font-weight: 600;
}
.t_head .th {
    box-sizing: border-box;
    border-right: 1px solid #000;
    padding: 10px;
    flex: none;
}
.t_body {
    box-sizing: border-box;
}
.tr {
    box-sizing: border-box;
    display: flex;
    border-bottom: 1px solid #000;
}
.tr .td {
    border-right: 1px solid #000;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    line-height: 100%;
    white-space: normal;
    word-break: break-all;
    flex: none;
}
</style>
